<template>
  <div class="notice-wrap">
    <el-button type="text" class="right">{{ $t('model.more') }}</el-button>
    <h5>{{ $t('model.noticeMsg') }}</h5>
    <div class="notice-group">
      <el-tabs>
        <el-tab-pane :label="$t('model.notice')">
          <template v-for="msg in msgList">
            <li style="cursor:pointer">
              <p>{{msg.title}}</p>
              <p class="tip">{{moment(msg.updTime).format('YYYY-MM-DD HH:mm')}}</p>
            </li>
          </template>
        </el-tab-pane>
        <el-tab-pane :label="$t('model.msg')">
          <template v-for="notice in noticeList">
            <li style="cursor:pointer">
              <p>{{notice.titleName}}</p>
              <p class="tip">{{moment(notice.publishTime).format('YYYY-MM-DD HH:mm')}}</p>
            </li>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name:"notice",
  data(){
    return {
      msgList:[],
      noticeList:[]
    }
  },
  methods:{
    getMsgList(){
      this.$post("/comNotificationRecord/queryComNotificationRecordByPage",{}).then(res => {
          this.msgList = res.data.list;
      })
    },
    getNoticeList(){
      this.$post("/comCompanyNotice/queryComCompanyNoticeByPage",{}).then(res => {
          this.noticeList = res.data.list;
      })
    },
  },
  mounted(){
    this.getMsgList()
    this.getNoticeList()
  }
}
</script>

<style lang="scss">
.notice-wrap{
  overflow: auto;
}
.notice-group{
  .el-tabs__content{
    overflow: hidden;
  }
  li{
    margin-bottom: 8px;
  }
  p{
    margin: 0;
  }
  .tip{
    color: #dac3b2;
  }
}
</style>